<template>
    <div class="help-page">
      <div class="help-title">帮助</div>
  
      <!-- 使用 el-collapse 来折叠/展开各个模块的说明 -->
      <el-collapse class="card-info" v-model="activeNames" accordion>
        <el-collapse-item title="我的知识库" name="1">
          <p>这里您可以查看您所拥有的所有知识条目。通过分类浏览或使用搜索功能快速定位所需信息。</p>
        </el-collapse-item>
        <el-collapse-item title="管理知识库" name="2">
          <p>在这一部分，您可以添加新的知识条目、编辑现有内容或删除不再需要的信息。保持您的知识库最新且有序。</p>
        </el-collapse-item>
        <el-collapse-item title="搜一搜" name="3">
          <p>支持关键词匹配，实现知识库的搜索。</p>
        </el-collapse-item>
        <el-collapse-item title="退出登录" name="4">
          <p>如果您想结束当前会话，请点击此选项安全地登出系统; 也可以切换用户。</p>
        </el-collapse-item>
      </el-collapse>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  // 定义激活的 collapse item，默认展开第一个
  const activeNames = ref(['1']);
  </script>
  
  <style scoped>
  .help-page {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .help-title{
    font-size: 30px;
  }

  .el-collapse {
    margin-top: 20px;
 
  }
  
  .el-collapse-item__header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 20px;
    transition: background-color 0.3s ease;
    outline: none; /* 去除点击时的黑色外边框 */
  }

 
  .el-collapse-item__header:hover {
    background-color: #eef7ff;
  }
  
  .el-collapse-item__content p {
    color: #666;
    line-height: 1.6;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
  }
  
  .el-collapse-item__content:last-child p {
    border-bottom: none;
  }
  </style>